/* eslint-disable */
import React, { Component } from "react";
import style from './maps.css'
import lujingguihua from '../../assets/imgs/lujingguihua.png';
import close from '../../assets/imgs/close.png';
import manyou from '../../assets/imgs/wangyuanjing.png';
import quandi from '../../assets/imgs/quandi.png';
import xinxi from '../../assets/imgs/xinxi.png';
import dadian from '../../assets/imgs/dadian.png';
import source from '../../assets/imgs/remenjingdian.png';
import yiyuans from '../../assets/imgs/yiyuan.png';
import deleted from '../../assets/imgs/delete.png';
import jiaotongIcon from '../../assets/imgs/jiaotong.png';
import dingweiIcon from '../../assets/imgs/dingwei.png';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      btnSwitch: true,
      houseData:[
        {
          title:'双府世家花园',
          lng:'108.892078',
          lat:'34.284083',
          countTitle:'居住人口',
          area:'0.98',
          live:61920,
          flow:7860,
          count:0,
          type:'house',
          pic:'img/love.png'
        },
        {
          title:'名京九合院',
          lng:'108.949313',
          countTitle:'居住人口',
          lat:'34.314177',
          area:'2.71',
          live:61920,
          flow:7860,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'         
        },
        {
          title:'骊景新天地',
          lng:'109.211816',
          countTitle:'居住人口',
          lat:'34.380694',
          area:'1.23',
          live:61920,
          flow:7860,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'         
        },        
        {
          title:'山水美树',
          lng:'108.987253',
          countTitle:'居住人口',
          lat:'34.147402',
          area:'2.09',
          live:61920,
          flow:7860,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'          
        },        
        {
          title:'御锦城',
          lng:'109.0487',
          countTitle:'居住人口',
          lat:'34.285023',
          area:'3.78',
          live:61920,
          flow:7860,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'          
        },        
        {
          title:'里花水社区',
          lng:'108.855656',
          countTitle:'居住人口',
          lat:'34.203782',
          area:'1.59',
          live:33000,
          flow:6800,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'
        },
        {
          title:'朝阳小区',
          lng:'109.091578',
          lat:'34.541429',
          countTitle:'居住人口',
          area:'2.18',
          live:33000,
          flow:6800,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'
        },
        {
          title:'御苑新城',
          lng:'108.629',
          lat:'34.104453',
          countTitle:'居住人口',
          area:'1.27',
          live:33000,
          flow:6800,
          count:0,
          type:'house',
          pic:'img/zhuzhailou.png'
        },        
        {
          title:'金悦城',
          lng:'108.721061',
          lat:'34.313553',
          countTitle:'居住人口',
          area:'0.89',
          live:64017,
          flow:11620,
          count: 0,
          type:'house',
          pic:'img/love.png'          
        },
        {
          title:'合阳县凤凰园',
          lng:'110.163005',
          lat:'35.237402',
          area:'3.91',
          countTitle:'居住人口',
          live:0,
          flow:0,
          count: 18320,
          type:'house',
          pic:'img/love.png'          
        },
        {
          title:'顾贤村',
          lng:'110.18244',
          lat:'35.222301',
          countTitle:'居住人口',
          area:'0.31',
          live:0,
          flow:0,
          count: 18320,
          type:'house',
          pic:'img/love.png'          
        },  
        {
          title:'禾盛京广中心',
          lng:'108.896524',
          lat:'34.235115',
          area:'17.28',
          countTitle:'在职人数',
          live:5.8,
          flow:0,
          count: 20000,
          type:'company',
          pic:'img/gongsi.png'
        },
        {
          title:'西安环普国际科技园',
          lng:'108.846864',
          lat:'34.215388',
          area:'42.57',
          countTitle:'在职人数',
          live:7.9,
          flow:6396,
          count: 0,
          type:'company',
          pic:'img/gongsi.png'
        },
        {
          title:'太奥广场平安理赔中心',
          lng:'108.902314',
          lat:'34.287489',
          area:'12.84',
          countTitle:'在职人数',
          live:4.7,
          flow:0,
          count: 18320,
          type:'company',
          pic:'img/gongsi.png'          
        }, 
        {
          title:'华为西安研究所',
          lng:'108.84608',
          lat:'34.200749',
          area:'67.9',
          countTitle:'在职人数',
          live:11.8,
          flow:0,
          count: 18320,
          type:'company',
          pic:'img/huawei.png'          
        },
        {
          title:'腾讯双创小镇',
          lng:'109.017997',
          lat:'34.35053',
          area:'74.9',
          countTitle:'在职人数',
          live:11.8,
          flow:0,
          count: 18320,
          type:'company',
          pic:'img/tengxun.png'          
        },
        {
          title:'中国国际丝路中心',
          lng:'108.777993',
          lat:'34.264309',
          area:'127.9',
          countTitle:'在职人数',
          live:11.8,
          flow:0,
          count: 18320,
          type:'company',
          pic:'img/sichouzhilu.png'          
        },                             
        
        {
          title:'西安交通大学(创新港校区)',
          lng:'108.663962',
          lat:'34.259771',
          area:'2.19',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xianjiaotongdaxue.png'                      
        },
        {
          title:'西北工业大学(长安校区)',
          lng:'108.775495',
          lat:'34.036332',
          area:'4.31',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xibeigongyedaxue.png'                      
        },
        {
          title:'西安电子科技大学(南校区)',
          lng:'108.840053',
          lat:'34.129522',
          area:'3.09',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xiandianzikejidaxue.png'                      
        },
        {
          title:'西北大学(长安校区)',
          lng:'108.875751',
          lat:'34.151098',
          area:'4.18',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xuexiao.png'                      
        },
        {
          title:'西北农林科技大学',
          lng:'108.079201',
          lat:'34.291648',
          area:'3.6',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xuexiao.png'                      
        },
        {
          title:'长安大学(渭水校区)',
          lng:'108.911175',
          lat:'34.373655',
          area:'2.77',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xuexiao.png'                      
        },
        {
          title:'陕西师范大学(雁塔校区)',
          lng:'108.96277',
          lat:'34.21534',
          area:'2.51',
          countTitle:'在校学生',
          live:61920,
          flow:7860,
          count: 0,
          type:'school',
          pic:'img/xuexiao.png'                      
        },        

        {
          title:'合阳县人民政府',
          lng:'110.1557',
          lat:'35.244098',
          area:'23.8',
          countTitle:'管理面积',
          live:41888,
          flow:4295,
          count: 0,
          type:'government',
          pic:'img/zhengfu.png'           
        },
        {
          title:'西安市人民政府',
          lng:'108.946166',
          lat:'34.349382',
          area:'1214.5',
          countTitle:'管理面积',
          live:93781,
          flow:6893,
          count: 0,
          type:'government',
          pic:'img/zhengfu.png'                 
        },
        {
          title:'陕西省政府',
          lng:'108.960729',
          lat:'34.271561',
          area:'3988.5',
          countTitle:'管理面积',
          live:93781,
          flow:24893,
          count: 0,
          type:'government',
          pic:'img/zhengfu.png'                 
        },
        {
          title:'沣西新城管委会',
          lng:'108.720027',
          lat:'34.298497',
          area:'28.5',
          countTitle:'管理面积',
          live:54781,
          flow:4593,
          count: 0,
          type:'government',
          pic:'img/zhengfu.png'                 
        }, 
        
        {
          title:'钟楼',
          lng:'108.95345',
          lat:'34.26573',
          area:'59.5',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/zhonglou.png'                 
        },
        {
          title:'大唐不夜城',
          lng:'108.970556',
          lat:'34.220781',
          area:'98.2',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/buyecheng.png'                 
        }, 
        {
          title:'秦始皇兵马俑博物馆',
          lng:'109.284886',
          lat:'34.390152',
          area:'78.9',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/bingmayong.png'                 
        },
        {
          title:'西安城墙',
          lng:'108.954666',
          lat:'34.257907',
          area:'64.2',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/chengqiang.png'                 
        },
        {
          title:'大唐芙蓉园',
          lng:'108.980724',
          lat:'34.218949',
          area:'41.8',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/furongyuan.png'                 
        },
        {
          title:'回民街',
          lng:'108.939053',
          lat:'34.274071',
          area:'48.3',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/huiminjie.png'                 
        },
        {
          title:'西安世博园',
          lng:'109.07046',
          lat:'34.321502',
          area:'38.8',
          countTitle:'5A',
          live:54781,
          flow:4593,
          count: 0,
          type:'scenicSpot',
          pic:'img/shiboyuan.png'                 
        },                                                   

      ],
      yiyuan:[
        {
          title:'西京医院',
          lng:'108.994701',
          lat:'34.276696',
          area:'0.54',
          countTitle:'容纳床位',
          live:93781,
          flow:2993,
          count: 0,
          biecheng:'西京医院',                
          dizhi:'陕西省西安市长乐西路15号',                
          dianhua:'029-84775507',                
          keshi:'54',                
          yisheng:'21',                
          chuangwei:'12021',                
          zhuanjia:'142',                
          jiaoshou:'41',                
          boshi:'24',                
          shuoshi:'69',                
        },
        {
          title:'西安交通大学医学院第一附属医院',
          lng:'108.943263',
          lat:'34.225864',
          area:'0.54',
          countTitle:'容纳床位',
          live:93781,
          flow:2993,
          count: 0,
          type:'hospital',
          biecheng:'交大一附院',                
          dizhi:'西安雁塔西路277号',                
          dianhua:'029—85323112',                
          keshi:'48',                
          yisheng:'58',                
          chuangwei:'10071',                
          zhuanjia:'121',                
          jiaoshou:'56',                
          boshi:'34',                
          shuoshi:'79',                            
        },
        {
          title:'西安交大第二附属医院',
          lng:'108.957412',
          lat:'34.277167',
          area:'0.54',
          countTitle:'容纳床位',
          live:93781,
          flow:2993,
          count: 0,
          type:'hospital',
          biecheng:'交大二附院',                
          dizhi:'西安市西五路157号',                
          dianhua:'029-87679000',                
          keshi:'38',                
          yisheng:'48',                
          chuangwei:'11071',                
          zhuanjia:'111',                
          jiaoshou:'50',                
          boshi:'37',                
          shuoshi:'54',                 
        }, 
        {
          title:'空军军医大学唐都医院',
          lng:'109.069081',
          lat:'34.290105',
          area:'0.54',
          countTitle:'容纳床位',
          live:93781,
          flow:2993,
          count: 0,
          type:'hospital',
          biecheng:'唐都医院',                
          dizhi:'西安市灞桥区新寺路1号',                
          dianhua:'84777777',                
          keshi:'38',                
          yisheng:'47',                
          chuangwei:'9971',                
          zhuanjia:'107',                
          jiaoshou:'40',                
          boshi:'39',                
          shuoshi:'87',                   
        },
        {
          title:'陕西省人民医院',
          lng:'108.936629',
          lat:'34.245714',
          area:'0.54',
          countTitle:'容纳床位',
          live:93781,
          flow:2993,
          count: 0,
          type:'hospital',
          biecheng:'省人民医院',                
          dizhi:'陕西省西安市友谊西路256号',                
          dianhua:'029-85251331',                
          keshi:'37',                
          yisheng:'45',                
          chuangwei:'9977',                
          zhuanjia:'110',                
          jiaoshou:'51',                
          boshi:'39',                
          shuoshi:'58',                   
        },                          
        {
          title:'第四军医大学口腔医院',
          lng:'108.992323',
          lat:'34.276035',
          area:'0.54',
          countTitle:'容纳床位',
          live:93781,
          flow:2993,
          count: 0,
          type:'hospital',
          biecheng:'秦都口腔医院',                
          dizhi:'西安市长乐西路145号',                
          dianhua:'029-84776225',                
          keshi:'48',                
          yisheng:'58',                
          chuangwei:'12071',                
          zhuanjia:'124',                
          jiaoshou:'59',                
          boshi:'39',                
          shuoshi:'78',                   
        },       
      ]
    };
  }


  componentDidMount() {
    setTimeout(() => {
      this.getMaps();
    }, 1000);

  }
  
  componentWillUnmount(){
    // setTimeout(() => {
    //   this.getMaps();
    // }, 1000);
  }

  setBtn = () =>{
    this.setState({
      btnSwitch: true
    })
  }


  getMaps = () =>{
    const { BMapGL } = window;
    const { houseData } = this.state;
    const { type } = this.props;
    // if(){

    // }
    var map = new BMapGL.Map("allmap"); // 创建Map实例
    
    // map.addControl(new BMapGL.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
    map.enableScrollWheelZoom(true);   
    // map.setMapType(BMAP_EARTH_MAP); 
    map.centerAndZoom(new BMapGL.Point(108.892078,34.284083), 11); // 初始化地图,设置中心点坐标和地图级别   
    map.setMapStyleV2({      //定制化样式
      styleId: '277ff28f18ee70e27cbd64955f3f6921'
    });

    //绘制当前行政区的边界
    var bdary = new BMapGL.Boundary();
    var name = '西安市';

    //覆盖物
    fugaiwu.addEventListener('click',function (){
        // this.setBtn();
        bdary.get(name, function(rs){       //获取行政区域
          map.clearOverlays();        //清除地图覆盖物       
          var count = rs.boundaries.length; //行政区域的点有多少个
          for(var i = 0; i < count; i++){
              var ply = new BMapGL.Polygon(rs.boundaries[i], 
                { 
                  strokeWeight: 2, 
                  strokeColor: "#004172",
                  fillColor:"#002b4b",
                  fillColorOpacity:"0.8",
                  strokeStyle: 'dashed'
                }); //建立多边形覆盖物
              map.addOverlay(ply);  //添加覆盖物
              map.setViewport(ply.getPath());    //调整视野   
          } 
        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point, text, mouseoverText) {
            this._point = point;
            this._text = text;
            this._overText = mouseoverText;
        }
        ComplexCustomOverlay.prototype = new BMapGL.Overlay();
        ComplexCustomOverlay.prototype.initialize = function(map) {
          this._map = map;
          var div = this._div = document.createElement("div");
          div.style.position = "absolute";
          div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
          // div.style.backgroundColor = 'rgba(251,148,71,.9)';
          div.style.border = "1px solid transparent";
          div.style.borderRadius = "5px";
          div.style.color = "white";
          div.style.height = "30px";
          div.style.width = "200px";
          div.style.textAlign = 'center';
          div.style.left = "20px";
          div.style.padding = "2px";
          //div.style.lineHeight = "18px";
          // div.style.whiteSpace = "nowrap";
          div.style.MozUserSelect = "none";
          div.style.fontSize = "12px";
          div.innerHTML = this._text;
          //div.style.opacity="0.5";


          var that = this;
          var arrow = this._arrow = document.createElement("div");
          // arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
          arrow.style.position = "absolute";
          arrow.style.width = "11px";
          arrow.style.height = "10px";
          arrow.style.top = "44px";
          arrow.style.left = "15px";
          arrow.style.overflow = "hidden";
          div.appendChild(arrow);

          map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function() {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 92 + "px";
        }

        if( houseData && houseData.length>0 ){
          houseData.forEach(it => { 
            let txt =  '';
            if(it.type ==='house'){
              txt =
              `<div style="position:relative; top:20px; left:30px;top: -4px;left: -90px;">
              <li style="list-style:none;border-radius:50px;padding-left:30px;height: 40px;line-height:30px;padding: 3px;background-color:#001552;border:2px solid #eb7272">
              <span style='color:#EB7272;letter-spacing:2px;font-size:15px;font-weight:700;'>居住人口:</span> 
              <span style='color: #FFFC00; font-size: 16px; margin-left:5px; font-weight: bold; font-family: DINPro;'>${it.area}</span>
              <span style='color:#eb7272;font-weight:700;margin-left:5px;font-size:15px;'>人<sup>(万)</sup></span>
              <li style="list-style:none;letter-spacing:3px;margin-left:7px;margin-top:0x;height:30px;line-height:34px;font-family: Source Han Sans CN;width:200px; background-color:transparent;color:#fff;font-size:15px;font-weight: bold;"><img style="width:26px;margin-top:-6px;height:26px;margin-right:4px;" src=${it.pic} /><span>${it.title}</span></li>
              </div>`
            }else if(it.type ==='company'){
                txt =  
                `<div style="width:275px;height:67px;position:relative;top:-33px;left:-127px;">
                  <div style="width:275px;height:67px;line-height:22px; display: flex;background-size:100% 100%;justify-content:space-around;background:url(img/peopleBg.png) no-repeat center;padding:10px 5px 0px 5px;">
                      <div style="text-align:center;margin-top: -4px;">
                        <span style="font-size: 15px;font-family: Microsoft YaHei;color: #8DD0FF;">在职人数</span><br/>
                        <span style="font-size: 16px;font-family: DINPro;font-weight: bold; color: #FFE400;">${it.live}</span>
                        <span style="font-size: 15px;font-family: PingFang SC;color: #98D5FF;margin-left:5px;">万人</span>                  
                      </div>
                      <div style="text-align:center;margin-top: -4px;">
                        <span style="font-size: 15px;font-family: Microsoft YaHei;color: #8DD0FF;">资产规模</span><br/>
                        <span style="font-size: 16px;font-family: DINPro;font-weight: bold; color: #FFE400;">${it.area}</span>
                        <span style="font-size: 15px;font-family: PingFang SC;color: #98D5FF;margin-left:5px;">亿元</span>                 
                      </div>             
                  </div>
                  <div style="list-style:none;letter-spacing:3px;margin-left:0;margin-top:16x;height:36px;line-height:36px;font-family: Source Han Sans CN;width:275px; background-color:transparent;color:#FFF;font-size:15px;"><img style="width:26px;margin-top:-6px;height:26px;margin-right:4px;" src=${it.pic} /><span>${it.title}</span></div>
                </div>`
              }else if(it.type ==='school'){
                txt =  
                `<div style="position:relative;top:-20px;left: -140px;text-align:center;">
                  <div style="width:160px;margin-left:70px;height:54px; background-size:100% 100%; line-height:44px;background:url('img/schoolBg.png') no-repeat center;padding:0px 5px 0px 5px;">
                        <span style="font-size: 15px;font-family: Microsoft YaHei;color: #8DD0FF;">在校学生</span>
                        <span style="font-size: 16px;font-family: DINPro;font-weight: bold; color: #FFE400;margin-left:2px;">${it.area}</span>
                        <span style="font-size: 15px;font-family: PingFang SC;color: #98D5FF;margin-left:2px;">万人</span>                  
                  </div>
                  <div style="list-style:none;letter-spacing:3px;margin-left:0;margin-top:16x;height:30px;line-height:34px;font-family: Source Han Sans CN;width:275px; background-color:transparent;color:#FFF;font-size:15px;"><img style="width:26px;margin-top:-6px;height:26px;margin-right:8px;" src=${it.pic} /><span>${it.title}</span></div>
                </div>`
            }else if(it.type ==='government'){
              txt =  
              `<div style="position:relative;top:-20px;left: -140px;text-align:center;">
                <div style="width:278px;margin-left:0px;height:49px;border-radius:8px; background-size:100% 100%; line-height:40px;background:url(img/titleBg.png) no-repeat center;;opacity:1;">
                      <span style="font-size: 13px;font-family: Microsoft YaHei;color:#3cc7fe;">辖区面积</span>
                      <span style="font-size: 15px;font-family: DINPro;font-weight: bold; color: #FFE400;margin-left:0px;">${it.flow}</span>
                      <span style="font-size: 13px;font-family: PingFang SC;color:#3cc7fe;margin-left:0px;">平方米</span> 
                      <span style='color:'#FFE400'>|</span>
                      <span style="font-size: 13px;font-family: Microsoft YaHei;color:#3cc7fe;">人口</span>
                      <span style="font-size: 15px;font-family: DINPro;font-weight: bold; color: #FFE400;margin-left:0px;">${it.area}</span>
                      <span style="font-size: 13px;font-family: PingFang SC;color:#3cc7fe;margin-left:0px;">万人</span>   
                </div>
                <div style="list-style:none;letter-spacing:3px;margin-left:0;margin-top:16x;height:30px;line-height:34px;font-family: Source Han Sans CN;width:275px; background-color:transparent;color:#FFF;font-size:15px;"><img style="width:26px;margin-top:-6px;height:26px;margin-right:8px;" src=${it.pic} /><span>${it.title}</span></div>
              </div>`
            }else if(it.type ==='scenicSpot'){
              txt =  
              `<div style="position:relative;top: -6px;left: -111px;">
                <div style="list-style:none;border-radius:50px;width:248px; padding-left:30px;height: 40px;line-height:30px;padding: 3px;background-color:#001549;border:2px solid #00FA9A">
                  <span style='color:#00FF00;letter-spacing:2px;font-size:15px;font-weight:700;'>星级:</span> 
                  <span style='color: #FFFC00; font-size: 16px; margin-left:0px; font-weight: bold; font-family: DINPro;'>${it.countTitle}</span>
                  &nbsp;
                  <span style='color:#00FF00;letter-spacing:2px;font-size:15px;font-weight:700;'>接待游客:</span> 
                  <span style='color: #FFFC00; font-size: 16px; margin-left:0px; font-weight: bold; font-family: DINPro;'>${it.area}</span>
                  <span style='color:#00FF00;font-weight:700;margin-left:0px;font-size:15px;'>万人</span>                  
                </div>              
                <div style="list-style:none;letter-spacing:3px;margin-left:7px;margin-top:0x;height:30px;line-height:34px;font-family: Source Han Sans CN;width:200px; background-color:transparent;color:#fff;font-size:15px;font-weight: bold;"><img style="width:26px;margin-top:-6px;height:26px;margin-right:4px;" src=${it.pic} /><span>${it.title}</span></div>
              </div>`
            }
            //绘制复杂div样式dom
            var myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(it.lng, it.lat), txt,''); 
            //mark
            var point = new BMapGL.Point(it.lng, it.lat,new BMapGL.Size(40, 80));   
            var marker = new BMapGL.Marker(point);        // 创建标注   
            view.addEventListener('click',function(){
                //复杂覆盖物加到地图
                map.addOverlay(myCompOverlay); 
            });
            points.addEventListener('click',function(){
              // 将标注添加到地图中
              map.addOverlay(marker);  
            });
            map.centerAndZoom(new BMapGL.Point(108.892078,34.284083), 10); // 初始化地图,设置中心点坐标和地图级别         
          });
        }
        });  
    });



    // 创建小车图标
    var myIcont = new BMapGL.Icon("img/dayanta2.png", new BMapGL.Size(65, 92));
    // 创建Marker标注，使用小车图标
    var pts = new BMapGL.Point(108.97058,34.224493);
    var marked = new BMapGL.Marker(pts, {
        icon: myIcont
    });        
    var jingdian = document.getElementById('jingdian');
    jingdian.addEventListener('click',function(){
      map.addOverlay(marked);  
      let infoWindowContent = `<div>
      <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
      大雁塔位于唐长安城晋昌坊（今陕西省西安市南）的大慈恩寺内，又名“慈恩寺塔”。
      唐永徽三年（652年），玄奘为保存由天竺经丝绸之路带回长安的经卷佛像主持修建了
      大雁塔，最初五层，后加盖至九层，再后层数和高度又有数次变更，最后固定为所看到的
      七层塔身，通高64.517米，底层边长25.5米。
      </p>
      <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
      大雁塔作为现存最早、规模最大的唐代四方楼阁式砖塔，是佛塔这种古印度佛寺的建筑形
      式随佛教传入中原地区，并融入华夏文化的典型物证，是凝聚了中国古代劳动人民智慧结
      晶的标志性建筑。            
      </p>
      </div>`;
      let opts = {
        width : 450,     // 信息窗口宽度
        height: 160,     // 信息窗口高度
        title : "大雁塔简介" , // 信息窗口标题
      }
      let infoWindow = new BMapGL.InfoWindow(infoWindowContent,opts);
      // marker添加点击事件
      marked.addEventListener('click', function () {
        this.openInfoWindow(infoWindow);
      });  
    });

    //医院
    const { yiyuan } = this.state;
    var jichusheshi = document.getElementById('jichusheshi');
    jichusheshi.addEventListener('click',function(){
      yiyuan.forEach(it => {
        // 创建小车图标
        let myIcon = new BMapGL.Icon("img/medical.png", new BMapGL.Size(60, 90));
        // 创建Marker标注，使用小车图标
        let pt = new BMapGL.Point(it.lng,it.lat);
        let markeres = new BMapGL.Marker(pt, {
            icon: myIcon
        });        
        map.addOverlay(markeres);  
        let infoWindowContent = `<div>
        <p style='margin:0;'>别称：${it.biecheng}</p>
        <p style='margin:0;'>地址：${it.dizhi}</p>
        <p style='margin:0;'>电话：${it.dianhua}(总机)</p>
        <p style='margin:0;'>服务介绍: 名医具有<span style='color:red;'>${it.keshi}</span>个科室，${it.yisheng}名医生）,${it.chuangwei}个床位，${it.zhuanjia}名专家</p>
        <p style='margin:0;text-indent:2em'>
          ${it.title}有教授、副教授${it.jiaoshou}名，博士生导师${it.boshi}名，硕士生导师${it.shuoshi}名            
        </p>
        </div>`;
        let opts = {
          width : 370,     // 信息窗口宽度
          height: 178,     // 信息窗口高度
          title : it.title , // 信息窗口标题
        }
        let infoWindow = new BMapGL.InfoWindow(infoWindowContent,opts);
        // marker添加点击事件
        markeres.addEventListener('click', function () {
          this.openInfoWindow(infoWindow);
        });  
      });

    })

    //相机漫游
    map.setTilt(20); 

    var keyFrames = [
      {
          center: new BMapGL.Point(108.892078,34.284083),     // 定义第一个关键帧帧地图中心点
          zoom: 18,                                      // 定义第一个关键帧地图等级
          tilt: 60,                                      // 定义第一个关键帧地图倾斜角度
          heading: 0,                                   // 定义第一个关键帧地图旋转方向
          percentage: 0                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
      },
      {
        center: new BMapGL.Point(108.892078,34.284083),     // 定义第一个关键帧帧地图中心点
        zoom: 18,                                      // 定义第一个关键帧地图等级
        tilt: 60,                                      // 定义第一个关键帧地图倾斜角度
        heading: 180,                                  // 定义第一个关键帧地图旋转方向
        percentage: 0.5                                // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
      },
      {
        center: new BMapGL.Point(108.892078,34.284083),     // 定义第一个关键帧帧地图中心点
        zoom: 18,                                      // 定义第一个关键帧地图等级
        tilt: 60,                                      // 定义第一个关键帧地图倾斜角度
        heading: 360,                                  // 定义第一个关键帧地图旋转方向
        percentage: 1                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
      }
    ];  

    var opts = {
      duration: 15000,     // 设置每次迭代动画持续时间
      delay: 3000,         // 设置动画延迟开始时间
      interation: 10000        // 设置动画迭代次数
    };

    var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
    animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
        console.log('start');
    });
    animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
        console.log('onanimationiterations');
    });
    animation.addEventListener('animationend', function(e) {        // 监听动画结束事件
        console.log('end');
    });
    animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
        console.log('cancel');
    });

    var manyouquxiao = document.getElementById('manyouquxiao');
    var manyou = document.getElementById('manyou');
    var deletes = document.getElementById('deletes');
    var jiaotong = document.getElementById('jiaotong');
    var dingwei = document.getElementById('dingwei');

    // 添加漫游
    manyou.addEventListener('click',function (){
      map.startViewAnimation(animation); 
    });

    //点击地图取消漫游
    manyouquxiao.addEventListener('click',function () {
      map.cancelViewAnimation(animation);
    });

    //路径规划
    lujing.addEventListener('click',function (){
      //路径规划
      let p1 = new BMapGL.Point(108.892078,34.284083);
      let p2 = new BMapGL.Point(108.90376,34.288371);
      let driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});      
        driving.search(p1, p2);
    });

    //添加交通图层
    jiaotong.addEventListener('click',function (){
      map.setTrafficOn(); // 开启路况
    });

    //地图定位
    dingwei.addEventListener('click',function(){
      var geolocation = new BMapGL.Geolocation();
      // 开启SDK辅助定位
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function(r){
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
              var mk = new BMapGL.Marker(r.point);
              map.addOverlay(mk);
              map.panTo(r.point);
              alert('您的位置：' + r.point.lng + ',' + r.point.lat);
          }
          else {
              alert('failed' + this.getStatus());
          }        
      });
    })

    //清除标记
    deletes.addEventListener('click',function (){
      map.clearOverlays(); //清除地图覆盖物 
      map.setTrafficOff(); // 关闭路况
    });
     
   
    // console.log('windowwindowwindowwindow', BMapGL)
  }

  render() {
      const { btnSwitch } = this.state;
    return (
      <>
        <div>
          <div className={style.btnBoxs}>
            <span className={style.btn} id='fugaiwu'><img className={style.icont} src={quandi} alt="" />边界显示</span>
            <span className={style.btn} id='points'><img className={style.icont} src={dadian} alt="" />地图打点</span>
            <span className={style.btn} id='view'><img className={style.icont} src={xinxi} alt="" />显示信息</span>            
            <span className={style.btn} id='lujing'><img className={style.icont} src={lujingguihua} alt="" />路径规划</span>            
            <span className={style.btn} id='jingdian'><img className={style.icont} src={source} alt="" />人气景点</span>            
            <span className={style.btn} id='jichusheshi'><img className={style.icont} src={yiyuans} alt="" />医疗设施</span>            
            <span className={style.btn} id='manyou'><img className={style.icont} src={manyou} alt="" />相机漫游</span>
            <span className={style.btn} id='jiaotong'><img className={style.icont} src={jiaotongIcon} alt="" />城市交通</span>            
            <span className={style.btn} id='dingwei'><img className={style.icont} src={dingweiIcon} alt="" />地图定位</span>            
            <span className={style.btn} id='manyouquxiao'><img className={style.icont} src={close} alt="" />关闭漫游</span>            
            <span className={style.btn} id='deletes'><img className={style.icont} src={deleted} alt="" />清除标记</span>            
          </div>          
          <div id="allmap" style={{ position: "absolute", top: 0, left: 0, width: 1919, height: 936 }}></div>
        </div>      
      </>
    );
  }

}